<template>
    <div class="forgot-password-container">
        <div class="forgot-password-content">
            <div class="logo">
                <img src="../../assets/logo.svg" alt="皮影快闪" />
            </div>

            <h1 class="title">找回密码</h1>
            <p class="subtitle">输入您的邮箱，我们将向您发送重置密码的链接</p>

            <n-form ref="formRef" :model="formData" :rules="rules" label-placement="left" label-width="0"
                class="forgot-password-form">
                <n-form-item path="email">
                    <n-input v-model:value="formData.email" placeholder="请输入邮箱"
                        :input-props="{ autocomplete: 'email' }">
                        <template #prefix>
                            <n-icon>
                                <MailOutline />
                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>

                <n-form-item>
                    <n-button type="primary" block @click="handleSubmit" :loading="loading" :disabled="loading">
                        发送重置链接
                    </n-button>
                </n-form-item>
            </n-form>

            <div class="form-footer">
                <n-button quaternary @click="goToLogin">
                    返回登录
                </n-button>
            </div>

            <n-modal v-model:show="showSuccessModal" preset="dialog" title="邮件已发送" positive-text="确定"
                @positive-click="goToLogin" :auto-focus="false">
                <template #icon>
                    <n-icon color="#18a058">
                        <CheckmarkCircleOutline />
                    </n-icon>
                </template>
                <div>重置密码的链接已发送到您的邮箱，请查收并按照邮件中的指示操作。</div>
            </n-modal>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {
    NForm,
    NFormItem,
    NInput,
    NButton,
    NIcon,
    NModal,
    useMessage
} from 'naive-ui'
import { MailOutline, CheckmarkCircleOutline } from '@vicons/ionicons5'
import type { FormInst, FormRules } from 'naive-ui'

const router = useRouter()
const message = useMessage()
const formRef = ref<FormInst | null>(null)
const loading = ref(false)
const showSuccessModal = ref(false)

const formData = reactive({
    email: ''
})

const rules: FormRules = {
    email: [
        {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
        },
        {
            type: 'email',
            message: '请输入有效的邮箱',
            trigger: ['blur', 'input']
        }
    ]
}

const handleSubmit = () => {
    formRef.value?.validate((errors) => {
        if (!errors) {
            loading.value = true

            // 模拟API请求
            setTimeout(() => {
                loading.value = false
                showSuccessModal.value = true

                // 实际应用中，这里应该调用发送重置密码邮件的API
                console.log('发送重置密码邮件', formData.email)
            }, 1500)
        } else {
            message.error('请检查表单填写')
        }
    })
}

const goToLogin = () => {
    router.push('/account/login')
}
</script>

<style lang="scss" scoped>
.forgot-password-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--body-color);

    .forgot-password-content {
        width: 100%;
        max-width: 420px;
        padding: 40px;
        background-color: var(--card-color);
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        text-align: center;

        .logo {
            margin-bottom: 24px;

            img {
                height: 64px;
            }
        }

        .title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .subtitle {
            font-size: 14px;
            color: var(--text-color-secondary);
            margin-bottom: 32px;
        }

        .forgot-password-form {
            margin-bottom: 24px;
        }

        .form-footer {
            display: flex;
            justify-content: center;
        }
    }
}

/* 响应式调整 */
@media (max-width: 576px) {
    .forgot-password-container {
        background-color: var(--card-color);
        align-items: flex-start;
        padding-top: 60px;

        .forgot-password-content {
            box-shadow: none;
            padding: 0 20px;
        }
    }
}
</style>